```jsx {18-31}
const ColorPicker = () => {
  const service = useMachine(colorPicker.machine, {
    id: createUniqueId(),
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })

  const api = createMemo(() => colorPicker.connect(service, normalizeProps))

  const presets = ["#ff0000", "#00ff00", "#0000ff"]

  return (
    <div {...api().getRootProps()}>
      {/* ... */}
      <div {...api().getPositionerProps()}>
        <div {...api().getContentProps()}>
          <div {...api().getSwatchGroupProps()}>
            <Index each={preset}>
              {(preset) => (
                <button {...api().getSwatchTriggerProps({ value: preset() })}>
                  <div style={{ position: "relative" }}>
                    <div {...api().getTransparencyGridProps({ size: "4px" })} />
                    <div {...api().getSwatchProps({ value: preset() })} />
                  </div>
                </button>
              )}
            </Index>
          </div>
        </div>
      </div>
    </div>
  )
}
```
